<template>
  <div class="class editor-html">
    <Toolbar
    style="border-bottom: 1px solid #ccc;"
    :editor="editorRef"
    :defaultConfig="toolbarConfig"
    :mode="mode"
    />
    <Editor
    :style="{height:height +'px','overflow-y':'hidden'}"
    :model-value="modelValue"
    :defaultConfig="editorConfig"
    :mode="mode"
    @onCreated="handleCreated"
    @onchange="onchange"
    />
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css";
import {onBeforeUnmount,ref,shallowRef} from "vue";
import {Editor,Toolbar} from "@wangeditor/editor-for-vue";
import {getCurrentInstance} from "vue";
const {proxy }=getCurrentInstance();

const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
    height: {
        type: Number,
        default: 500,
    },
});

const mode = ref("default");
const editorRef = shallowRef();

const toolbarConfig = {
    excludeKeys: [
        "uploadVideo", // 排除菜单组，写菜单组key的值即可
    ]
};

const editorConfig = {
    placeholder: "请输入内容……",
    excludeKeys: ["uploadvideo"],
    MENU_CONF: {
        uploadImage: {
            maxFileSize: 3 * 1024 * 1024,
            server: "/api/file/uploadImage",
            fieldName: "file",
            customInsert(responseData, insertFn) {
                if (responseData.code == 200) {
                    insertFn(
                        proxy.globalInfo.imageUrl + responseData.data.fileName,
                        "",
                        ""
                    );
                    return;
                } else if (responseData.code == 901) {
                    // 登录超时
                    store.commit("showlogin", true);
                    store.commit("updateloginUserInfo", null);
                    return;
                }
                proxy.Message.error(responseData.info);
            }
        }
    }
};


const emit = defineEmits();
const onChange = (editor) => {
    emit("update:modelValue", editor.getHtml());
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录editor实例，重要!
};

</script>

<style lang="scss">
.editor-html {
  border: 1px solid #ddd;
}
</style>